<template>
	<app-layout>

		<!-- 顶部自定义导航 -->
		<tn-nav-bar> </tn-nav-bar>
		<view class=" tn-bg-white tn-safe-area-inset-bottom">

			<view class="tn-safe-area-inset-bottom template-edit" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
				<view class="title">
					{{message.tit}}
				</view>
				<view class="from tn-flex ">
					<view class="author">
						{{message.gsxz}}-{{message.fajian}}
					</view>
					<view class="date">
						{{message.fjtime}}
					</view>
					<!-- <view class="tag">
						{{message.sfread?'已读':'未读'}}
					</view> -->
				</view>

				<view class="content">
					<u-parse :content="message.comm"></u-parse>
					<view class="tn-margin-bottom-lg"></view>
					<u-parse :content="message.com"></u-parse>
						<view class="tn-margin-bottom-lg"></view>
					<view class="tn-flex tn-padding-bottom-lg" >
						<view class=" tn-color-gray"><text class="tn-color-black ">已读人员：</text>{{message.readuser || '暂无已读人员'}}</view>
					
					</view>
				</view>

			</view>
			<template
				v-if="message.sfread==0 && (userinfo.usergroup!='admin'|| userinfo.usergroup!='jdb'|| userinfo.usergroup!='sg')">
				<bottom-btn @save="save" subtext="标记已读" @submit="submit"></bottom-btn>
			</template>

			<view class='tn-tabbar-height'></view>

		</view>
	</app-layout>
</template>

<script>
	import uParse from "@/components/u-parse/u-parse.vue"
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import {
		mapGetters,
		mapState
	} from 'vuex';


	export default {
		name: 'TemplateEdit',
		mixins: [template_page_mixin],
		components: {
			uParse
		},
		data() {
			return {
				message: {},
				id: '',
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo
			})
		},
		onShow() {
			let t = this;
			if (!t.userinfo) {
				t.$user.getInfo()
			}
		},
		onLoad(options) {
			let t = this;
			this.id = options.id ? options.id : this.id;
			if (!this.id) {
				uni.showModal({
					title: '提示',
					content: '消息已被清理',
					showCancel: false,
					success() {
						this.goBack()
					}
				})
			}
			t.getinfo()

		},

		methods: {
			submit() {
				let t = this;
				this.$t.message.loading('提交中');
				this.$request({
					url: this.$api.message.read,
					data: {
						id: t.id
					}
				}).then(response => {
					this.$t.message.closeLoading();
					t.getinfo()
					this.$t.message.toast(response.msg);

				}).catch((msg) => {
					this.$t.message.toast(msg);
					this.$t.message.closeLoading();
				});
			},
			getinfo() {
				let t = this;
				this.$t.message.loading('加载中');
				this.$request({
					url: this.$api.message.detail,
					data: {
						id: t.id
					}
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						t.message = response.info
					} else {
						this.$t.message.toast(response.msg);
					}
				}).catch((msg) => {
					this.$t.message.toast(msg);
					this.$t.message.closeLoading();
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {
		margin: 20rpx 30rpx
	}

	.title {
		font-weight: 550;
		font-size: 36rpx;
	}

	.from {
		align-items: center;
		margin: 20rpx 0;
		display: flex;
		color: #999
	}
	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}
	.author {
		margin-right: 15rpx;
	}

	.date {
		margin-right: 15rpx;
	}

	.address {
		margin-right: 15rpx;
	}

	/* 标签内容 end*/
</style>